<template>
  <!-- 销售 项目预测详情 -->
  <view class="costs-assign">
    <u-navbar
      v-if="!$isWeixin()"
      :title="title"
      :titleBold="true"
      :background="{ backgroundColor: '#ffffff' }"
      :is-fixed="true"
    ></u-navbar>

    <u-tabs
      :list="tabList"
      :is-scroll="false"
      active-color="#ff8441"
      :current="current"
      @change="handleTabChange"
    ></u-tabs>

    <template v-if="List && List.length > 0">
      <view :class="['costs-assign-item orange']" v-for="(item, index) in List" v-if="List && List.length > 0">
        <view
          v-if="current == 2"
          :class="['del-btn', { checkedActive: itemArr.includes(item.Id) }]"
          @click="itemChecked(item)"
        >
          <u-icon size="30" name="checkbox-mark" :bold="true" color="#fff"></u-icon>
        </view>

        <view class="costs-assign-item-title">
          <view class="title nowrap u-flex u-row-between">
            <view class="title-left">
              <text class="line"></text>
              {{ item.Title }}
            </view>
            <text class="u-font-lg u-m-r-60 gray">{{ item.Region_Area }}</text>
          </view>
          <view class="timer nowrap u-flex u-row-between">
            <view>{{ item.WaysTypeName }}</view>
            <view style="display: flex; gap: 16rpx; padding-right: 16rpx;">
              <u-tag v-if="item.ActualCost > item.BDRCost" text="超标" mode="dark" type="error" size="mini"></u-tag>
              <u-tag v-if="item.BlockState > 0" text="挂起" mode="dark" type="error" size="mini"></u-tag>
            </view>
          </view>
        </view>
        <view class="costs-assign-item-con">
          <view
            class="flex"
            style="display: flex;justify-content: space-between; align-items: center; ;padding-right: 40rpx; margin-top: 16rpx;"
          >
            <view class="row-item" style="margin-top: 0;">
              <view class="label-name">落地城市</view>
              <view class="price">{{ item.ProvinceName }}</view>
            </view>
            <text v-html="getStateText(item)"></text>
          </view>
          <view class="row-item">
            <view class="label-name">预测费用</view>
            <view class="price">￥{{ item.BDRCost }}</view>
          </view>

          <view class="row-item">
            <view class="label-name">项目进度</view>
            <view class="price" v-html="getProcessText(item)"></view>
          </view>

          <view class="row-item">
            <view class="label-name">项目时间</view>
            <view class="price">{{ $u.timeFormat(item.Created) }}</view>
          </view>
        </view>

        <view class="btn-group u-text-right u-p-b-20 u-p-r-20  ">
          <u-button
            type="warning"
            size="medium"
            plain
            :custom-style="btnStyle"
            @tap="toProgressPage(item)"
            shape="circle"
          >
            进度
          </u-button>

          <u-button
            class="u-m-l-10"
            plain
            type="warning"
            size="medium"
            @click="toDetailPage(item)"
            shape="circle"
            :custom-style="btnStyle"
          >
            详情
          </u-button>
          <u-button
            v-if="showReviewBtn(item)"
            class=" u-m-l-10"
            type="warning"
            size="medium"
            :custom-style="btnStyle"
            shape="circle"
            @click="toReviewPage(item)"
          >
            预测审核
          </u-button>
          <u-button
            v-if="showExecuteReviewBtn(item)"
            class=" u-m-l-10"
            type="warning"
            size="medium"
            :custom-style="btnStyle"
            shape="circle"
            @click="toExecutePage(item)"
          >
            执行审核
          </u-button>
          <u-button
            v-if="showOverReviewBtn(item)"
            class=" u-m-l-10"
            type="warning"
            size="medium"
            :custom-style="btnStyle"
            shape="circle"
            @click="toOverReviewPage(item)"
          >
            超标审核
          </u-button>
          <u-button
            v-if="showCheckReviewBtn(item)"
            class=" u-m-l-10"
            type="warning"
            size="medium"
            :custom-style="btnStyle"
            shape="circle"
            @click="toCheckReviewPage(item)"
          >
            验收审核
          </u-button>
        </view>
      </view>
      <u-empty v-else text="暂无数据" mode="list"></u-empty>
      <u-loadmore :status="status" />
    </template>
    <template v-else>
      <u-empty text="暂无数据"></u-empty>
    </template>
    <view class="btn-group-fixed u-flex" v-if="current != 3">
      <view class="u-flex u-flex-1">
        <view v-if="current == 2" class="box" @click="allChecked">
          <view class="u-m-l-10">
            <u-checkbox-group>
              <u-checkbox v-model="isAllChecked" active-color="#ff7626" :label-disabled="false"></u-checkbox>
            </u-checkbox-group>
          </view>
          <view>全选</view>
        </view>

        <view v-if="current != 3" class="box u-flex-1 u-p-r-20">
          <view class="u-flex u-row-between  ">
            <span>YTD市场总费用:</span>
            <span>￥{{ TotalCheckCost }}</span>
          </view>
          <view class="u-flex u-row-between">
            <span>积分商城已申请市场费用:</span>
            <span>￥{{ TotalScoreCost }}</span>
          </view>
          <view v-if="current == 0" class="u-flex u-row-between">
            <span>已申请市场费用:</span>
            <span>￥{{ ForecastCost }}</span>
          </view>

          <view v-if="current == 1" class="u-flex u-row-between">
            <span>已执行市场费用:</span>
            <span>￥{{ ImplementCost }}</span>
          </view>

          <block v-if="current == 2">
            <view class="u-flex u-row-between">
              <span>已选择市场费用:</span>
              <span>￥{{ forecastMoney }}</span>
            </view>

            <view class="u-flex u-row-between">
              <span>已核销市场费用:</span>
              <span>￥{{ AlrCheckCost }}</span>
            </view>
          </block>
        </view>

        <!-- <view v-else class="box u-flex-1 u-p-r-20">
          <view class=" u-flex u-row-between  ">
            <span>已选择费用:</span>
            <span>￥{{ forecastMoney }}</span>
          </view>
          <view class="u-flex u-row-between">
            <span>当前可核销费用:</span>
            <span>￥{{ AlrCheckCost }}</span>
          </view>
        </view> -->
      </view>
      <view v-if="current == 2" class="box u-flex-col">
        <view class="error-btn" style="width: 100%;" @click="batchOperation('reject')">批量驳回</view>
        <view class="primary-btn" style="width: 100%;" @click="batchOperation('pass')">批量通过</view>
      </view>
    </view>

    <u-popup v-model="showMore" mode="bottom" :border-radius="24">
      <u-cell-group>
        <u-cell-item
          title="已选汇总"
          :label-style="{
            'font-weight': 'bold'
          }"
          :arrow="false"
          :border-bottom="false"
          :value="forecastMoney"
        ></u-cell-item>
        <u-cell-item title="已申请金额" :arrow="false" :border-bottom="false" :value="apply_total_money"></u-cell-item>
        <u-cell-item title="已核销金额" :arrow="false" :border-bottom="false" :value="check_total_money"></u-cell-item>
        <u-cell-item title="合计使用" :arrow="false" :border-bottom="false" :value="add_total_money"></u-cell-item>

        <u-cell-item
          title="一级预测销售使用占比"
          :arrow="false"
          :border-bottom="false"
          :value="not_audit_first_Proportion"
          :value-style="{ color: getColor(not_audit_first_Proportion) }"
        >
          <template #right-icon>
            <span class=" u-m-l-10" :style="{ color: getColor(not_audit_first_Proportion) }">%</span>
          </template>
        </u-cell-item>

        <u-cell-item
          title="审核通过后预测占比"
          :arrow="false"
          :border-bottom="false"
          :value="audit_first_Proportion"
          :value-style="{ color: getColor(audit_first_Proportion) }"
        >
          <template #right-icon>
            <span class=" u-m-l-10" :style="{ color: getColor(audit_first_Proportion) }">%</span>
          </template>
        </u-cell-item>

        <u-cell-item
          title="区域市场费用使用占比"
          :arrow="false"
          :border-bottom="false"
          :value="area_Proportion"
          :value-style="{ color: getColor(area_Proportion) }"
        >
          <template #right-icon>
            <span class=" u-m-l-10" :style="{ color: getColor(area_Proportion) }">%</span>
          </template>
        </u-cell-item>

        <u-cell-item
          title="审核通过后区域市场费用预测占比"
          :arrow="false"
          :border-bottom="false"
          :value="audit_area_Proportion"
          :value-style="{ color: getColor(audit_area_Proportion) }"
        >
          <template #right-icon>
            <span class=" u-m-l-10" :style="{ color: getColor(audit_area_Proportion) }">%</span>
          </template>
        </u-cell-item>
      </u-cell-group>

      <view class="u-flex u-row-center u-p-b-40 u-p-t-40" @tap="showMore = false">
        <span style="color: #ff7626">隐藏</span>
        <u-icon class="u-m-l-10" name="arrow-down" color="#ff7626" size="28"></u-icon>
      </view>
    </u-popup>

    <u-modal
      :title="confirmCon"
      v-model="showConfirm"
      ref="confirmRef"
      :async-close="true"
      :show-title="true"
      :show-cancel-button="true"
      @confirm="handleOperation"
      @cancel="handleCancel"
    >
      <u-cell-item title="审核备注" :arrow="false" style="padding-bottom: 0;" :border-bottom="false"></u-cell-item>
      <u-cell-item :arrow="false">
        <u-input type="textarea" v-model="review.AuditRemark" placeholder="请输入内容"></u-input>
      </u-cell-item>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShowBtn: false,
      btnList: [{ label: '取消', value: 2 }, { label: '延期', value: 3 }],
      itemArr: [], //全选
      isAllChecked: false,
      forecastMoney: 0,

      TotalScoreCost: 0,
      TotalCheckCost: 0,
      ForecastCost: 0,
      ImplementCost: 0,
      AlrCheckCost: 0,

      tabList: [
        { name: '预测审核', type: 1, ObjectId: 21 },
        { name: '执行审核', type: 2, ObjectId: 22 },
        { name: '核销审核', type: 4, ObjectId: 24 },
        { name: '全部', type: 5 }
      ],

      current: 0,

      title: '',

      btnStyle: {
        height: '50rpx',
        color: '#ffffff',
        padding: '0 30rpx'
      },

      showMore: false,

      searchParams: {
        Year: '',
        CompanyId: '',
        QuarterId: '',
        WaysTypeId: '',
        FirstDealerId: '',
        Type: 1
      },
      currentId: '',
      showConfirm: false,
      confirmCon: '',

      showReview: 1,

      status: 'loadmore',
      Page: {
        Items: [],
        PageCount: 0,
        PageIndex: 0,
        PageSize: 10,
        TotalCount: 0
      },
      Dist_ThisLevelBalance: 0,
      Dist_TypeBalance: 0,
      List: [],

      review: {
        State: '',
        AuditRemark: '',
        AuditType: 2,
        Id: '',
        ApplyManagerId: '',
        ActualCost: 0,
        WriteOff_Type: 0,
        ContractNo: '',
        json: ''
      },

      apply_total_money: 0, //已申请金额  注意勾选复选框触发 后取值问题
      check_total_money: 0, //已核销金额
      add_total_money: 0, // 合计使用
      not_audit_first_Proportion: 0, //一级使用占比
      audit_first_Proportion: 0, //审核通过后预测占比

      diff_ActualSales: 0, //一级销量总额
      checked_bdr_cost: 0,
      Region_Area_Apply_Money: 0,
      Region_Area_Dealer_Money: 0,
      // 区域市场费用预测占比
      area_Proportion: 0,
      // 审核通过后区域市场费用预测占比
      audit_area_Proportion: 0
    };
  },
  onLoad(options) {
    if (options.Year) {
      this.searchParams.Year = options.Year;
    }

    if (options.CompanyId) {
      this.searchParams.CompanyId = options.CompanyId;
    }

    if (options.QuarterId) {
      this.searchParams.QuarterId = options.QuarterId;
    }

    if (options.WaysType) {
      this.searchParams.WaysTypeId = options.WaysType;
    }

    if (options.FirstDealerId) {
      this.searchParams.FirstDealerId = options.FirstDealerId;
    }

    if (options.showReview) {
      this.showReview = options.showReview;
    }

    this.title = '预测审核列表';

    this.getData(true);
  },

  // 触底事件
  onReachBottom() {
    if (this.Page.PageIndex + 1 >= this.Page.PageCount) return;
    this.status = 'loading';
    this.Page.PageIndex = this.Page.PageIndex + 1;
    this.getData();
    // this.isAllChecked = this.itemArr.length == this.List.length?true:false
  },
  methods: {
    toProgressPage(item) {
      // 预测21  执行22 核销24

      this.$u.route({
        url: '/pages/review/progress',
        params: {
          id: item.Id,
          ObjectId: item.ObjectId
        }
      });
    },

    getDetailState(CourseState, state_str) {
      var result = '';
      if (CourseState == 99) {
        result = '取消';
      } else if (CourseState == 999) {
        result = '撤销';
      } else {
        result = state_str;
      }
      return result;
    },

    handleTabChange(index) {
      this.current = index;
      this.Page.PageIndex = 0;
      const tab = this.tabList[index];
      this.searchParams.Type = tab.type;
      this.getData(true);
    },
    // 0-1.8 百分比为绿色字体 1.8-2 橙色 2以上红色字体
    getColor(value) {
      if (value > 2) {
        return 'red';
      }

      if (value > 1.8) {
        return '#dd5300';
      }

      return 'green';
    },

    getStateText(item) {
      if (item.State == 1) {
        return '未审核';
      } else if (item.State == 9) {
        return '审核中';
      } else if (item.State > 0 && item.State != 1 && item.State != 9 && item.State != 11) {
        return '审核完成';
      } else if (item.State == 11) {
        return '审核驳回';
      } else {
        return '';
      }
    },

    getProcessText(item) {
      const MarketMoney_Project_New_State_str = {
        '1': "<span style='color:black;'>计划<span>",
        '2': "<span style='color:green;'>待执行<span>",
        '3': "<span style='color:green;'>待核销<span>",
        '4': "<span style='color:green;'>核销中<span>",
        '5': "<span style='color:green;'>已完成<span>",
        '6': "<span style='color:orange;'>延期执行<span>",
        '7': "<span style='color:red;'>取消<span>",
        '8': "<span style='color:red;'>申请驳回<span>",
        '9': "<span style='color:green;'>执行中<span>"
      };

      return MarketMoney_Project_New_State_str[item.NewState] ?? '';
    },

    getStateText(item) {
      let MarketMoney_Project_State_str = {
        '1': "<span style='color:black;'>待审核<span>",
        '2': "<span style='color:green;'>-<span>",
        '3': "<span style='color:green;'>-<span>",
        '4': "<span style='color:green;'>-<span>",
        '5': "<span style='color:green;'>-<span>",
        '6': "<span style='color:black;'>待审核<span>",
        '7': "<span style='color:black;'>待审核<span>",
        '8': "<span style='color:black;'>待审核<span>",
        '9': "<span style='color:green;'>审核中<span>",
        '11': "<span style='color:red;'>审核驳回<span>",
        '99': "<span style='color:green;'>审核中<span>",
        '101': "<span style='color:red;'>审核驳回<span>",
        '199': "<span style='color:green;'>审核中<span>",
        '201': "<span style='color:red;'>审核驳回<span>",
        '299': "<span style='color:green;'>审核中<span>",
        '301': "<span style='color:red;'>审核驳回<span>",
        '999': "<span style='color:black;'>撤销<span>"
      };

      return MarketMoney_Project_State_str[item.State];
    },

    // 执行审核按钮
    showExecuteReviewBtn(item) {
      if (item.NextAuditMangerId == this.vuex_user.ManagerId) {
        if ((item.IsExceed != 1 && item.State == 99) || item.State == 6) {
          return true;
        }
      }
      return false;
    },

    // 超标审核按钮
    showOverReviewBtn(item) {
      if (item.NextAuditMangerId == this.vuex_user.ManagerId) {
        if ((item.IsExceed == 1 && item.State == 199) || item.State == 7) {
          return true;
        }
      }
      return false;
    },

    // 验收审核按钮
    showCheckReviewBtn(item) {
      if (item.NextAuditMangerId == this.vuex_user.ManagerId) {
        if (item.State == 299 || item.State == 8) {
          return true;
        }
      }
      return false;
    },

    toExecutePage(item) {
      this.$u.route({
        url: '/pages/marketCosts/sales/applyExecute',
        params: {
          Id: item.VId,
          DetailId: item.Id,
          type: 'review'
        }
      });
    },

    toApplyCheckPage(item) {
      this.$u.route({
        url: '/pages/marketCosts/sales/applyCheck',
        params: {
          Id: item.VId,
          DetailId: item.Id,
          type: 'review'
        }
      });
    },

    toCheckReviewPage(item) {
      this.$u.route({
        url: '/pages/marketCosts/sales/applyCheck',
        params: {
          Id: item.VId,
          DetailId: item.Id,
          type: 'review'
        }
      });
    },

    toExecuteReviewPage(item) {
      this.$u.route({
        url: '/pages/marketCosts/sales/applyExecute',
        params: {
          Id: item.VId,
          DetailId: item.Id,
          type: 'review'
        }
      });
    },

    showReviewBtn(item) {
      if (item.NextAuditMangerId == this.vuex_user.ManagerId) {
        if (item.State == 1 || item.State == 9) {
          return true;
        }
      }

      return false;
    },

    toReviewPage(item) {
      this.$u.route({
        url: '/pages/marketCosts/sales/predictionReview',
        params: {
          Id: item.VId,
          DetailId: item.Id
        }
      });
    },

    toDetailPage(item) {
      this.$u.route({
        url: '/pages/marketCosts/sales/detail',
        params: {
          Id: item.VId,
          DetailId: item.Id,
          type: 'review',
          ObjectId: item.ObjectId
        }
      });
    },

    handleCancel() {
      this.review.AuditRemark = '';
    },

    getData(reload) {
      uni.showLoading({});
      this.$u.api
        .getPredictionDetailList({
          ...this.searchParams,
          ...{
            Pageindex: this.Page.PageIndex,
            Pagesize: this.Page.PageSize
          }
        })
        .then(res => {
          const {
            ProjectAuditList: PageList,
            ResultCode,
            ResultMessage,
            CheckCost,
            TotalCheckCost,
            TotalScoreCost,
            ForecastCost,
            ImplementCost,
            AlrCheckCost
          } = res;

          if (ResultCode == 1 || ResultCode == 2) {
            this.CheckCost = CheckCost;
            this.TotalCheckCost = TotalCheckCost;
            this.TotalScoreCost = TotalScoreCost;
            this.ForecastCost = ForecastCost;
            this.ImplementCost = ImplementCost;
            this.AlrCheckCost = AlrCheckCost;

            if (PageList) {
              this.Page = PageList;
              if (reload) {
                this.List = PageList.Items;
              } else {
                this.List.push(...PageList.Items);
              }

              if (this.Page.PageIndex + 1 >= this.Page.PageCount) {
                this.status = 'nomore';
              }
            } else {
              this.List = [];
              this.status = 'nomore';
            }
          } else {
            this.$u.toast(ResultMessage);
          }
        });
    },

    handleOperation() {
      if (Number(this.CheckCost) < Number(this.forecastMoney)) {
        this.$u.toast('可用总金额需要大于汇总金额');
        return false;
      }

      this.$u.api
        .reviewCheck(this.review)
        .then(res => {
          const { ResultCode, ResultMessage } = res;
          if (ResultCode == 1) {
            this.getData(true);

            this.itemArr = [];
          }
          this.$u.toast(ResultMessage);
        })
        .finally(() => {
          this.showConfirm = false;
        });
    },
    batchOperation(type) {
      this.review.Id = this.itemArr.join(',');
      this.review.ApplyManagerId = this.vuex_user.ManagerId;

      if (type == 'reject') {
        this.review.State = 2;
        this.confirmCon = '是否确定批量驳回？';
      } else {
        this.review.State = 1;
        this.confirmCon = '是否确定批量通过？';
      }
      this.showConfirm = true;
    },
    itemChecked(item) {
      let indexs = this.itemArr.findIndex(items => items == item.Id);
      if (indexs == -1) {
        this.forecastMoney += Number(item.BDRCost);
        this.itemArr.push(item.Id);
      } else {
        this.forecastMoney -= Number(item.BDRCost);
        this.itemArr.splice(this.itemArr.indexOf(item.Id), 1);
      }

      this.List.filter(item => this.itemArr.indexOf(item.Id) > -1).forEach(item => {
        this.checked_bdr_cost += Number(item.BDRCost);

        if (item.State >= 2 && item.State != 9 && item.State != 11 && item.State != 999) {
          if (item.State == 5) {
            this.apply_total_money += Number(this.CheckCost); //已申请
          } else {
            this.apply_total_money += Number(this.BDRCost);
          }
        }
        //已核销金额
        if (item.State == 5) {
          this.check_total_money += Number(this.CheckCost); //已核销
        }
        this.add_total_money = this.apply_total_money + this.check_total_money;
        if (this.diff_ActualSales > 0) {
          this.not_audit_first_Proportion = ((this.apply_total_money / this.diff_ActualSales) * 100).toFixed(2);
          this.audit_first_Proportion = (
            ((this.apply_total_money + this.checked_bdr_cost) / this.diff_ActualSales) *
            100
          ).toFixed(2);
        }

        this.audit_first_Proportion = (
          ((this.apply_total_money + this.checked_bdr_cost) / this.diff_ActualSales) *
          100
        ).toFixed(2);
        this.audit_area_Proportion = (
          ((this.Region_Area_Apply_Money + this.checked_bdr_cost) / this.Region_Area_Dealer_Money) *
          100
        ).toFixed(2);

        this.area_Proportion = ((this.Region_Area_Apply_Money / this.Region_Area_Dealer_Money) * 100).toFixed(2); //区域市场费用使用占比
      });

      this.isAllChecked = this.itemArr.length == this.List.length;
    },
    allChecked() {
      if (this.isAllChecked) {
        this.itemArr = this.List.map(items => items.Id);
        this.forecastMoney = this.List.map(itemnew => Number(itemnew.BDRCost)).reduce((n, m) => n + m);
        // this.availableMoney = this.List.map(itemnew => Number(itemnew.ActualCost)).reduce((n,m) => n + m);
      } else {
        this.forecastMoney = 0;
        this.itemArr = [];
      }
    }
  },

  watch: {
    itemArr(val) {
      console.log(val);
    }
  }
};
</script>

<style lang="scss">
.btn-group-fixed {
  box-shadow: 0px 0px 8px rgba(174, 178, 183, 0.25);
  background: #fff;
  z-index: 9999999;
  // height: 110rpx;
  display: flex;
  width: 100%;
  justify-content: space-between;
  .primary-btn,
  .error-btn {
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 20rpx;
    color: #fff;
  }
  .primary-btn {
    background: #2b79ff;
    margin-right: -20rpx;
  }
  .error-btn {
    background: #fa3633;
  }
}
.costs-assign {
  width: 750rpx;
  padding: 20rpx 20rpx;
  padding-bottom: 140rpx;
  .costs-assign-item {
    position: relative;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
    border-radius: 16rpx;
    margin-bottom: 28rpx;
    border-top: 6rpx solid #ff8441;
    .del-btn {
      position: absolute;
      right: 0;
      top: -6rpx;
      font-weight: bold;
      background: #a1a0a0;
      width: 80rpx;
      text-align: center;
      height: 54rpx;
      line-height: 54rpx;
      border-radius: 0 16rpx 0 30rpx;
    }
    .checkedActive {
      background: #f4570e;
    }
    .costs-assign-item-title {
      padding-top: 30rpx;
      padding-bottom: 10rpx;
      border-radius: 16rpx 16rpx 0 0;
      line-height: 50rpx;
      font-size: 30rpx;
      border-bottom: 1rpx dashed #b9b9b9;
      .title {
        display: flex;
        align-items: center;
        flex: 2;
        font-size: 36rpx;
        font-weight: bold;
        .line {
          display: inline-block;
          height: 36rpx;
          width: 6rpx;
          margin-right: 20rpx;
          background: #ff8441;
        }
      }

      .title-left {
        width: 560rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .timer {
        margin-left: 26rpx;
        flex: 1;
        color: #ff8441;
        font-size: 30rpx;
      }
    }
    .costs-assign-item-con {
      font-size: 30rpx;
      padding: 0 20rpx 10rpx 20rpx;
      position: relative;
      .status-audit {
        position: absolute;
        right: 80rpx;
        top: 30%;
        // transform: rotateZ(30deg);
      }
      .success {
        color: #2eac67;
      }
      .row-item {
        display: flex;
        margin-top: 16rpx;
        .label-name {
          color: #666;
          width: 200rpx;
        }
        .price {
          // font-size: 36rpx;
        }
      }
      hr {
        margin: 28rpx 0;
        border: 1rpx dashed #b9b9b9;
      }
    }
    .add-timer {
      padding-top: 20rpx;
      margin-left: 20rpx;
    }
    .btn-wrap {
      margin: 20rpx;
      padding-bottom: 20rpx;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: 16rpx;
      .btn-item {
        border-radius: 6rpx;
        height: 68rpx;
        line-height: 68rpx;
        text-align: center;
      }
      .info-btn,
      .set-btn,
      .adjust-btn {
        border: 1px solid #ff7626;
        color: #ff7626;
      }
      .cost-btn {
        background: linear-gradient(301.09deg, #f29e40 6.64%, #f7b66e 91.7%);
        color: #fff;
      }
    }
  }
}
.gray {
  color: #999;
  font-weight: normal;
}
.center {
  text-align: center;
}
.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
